<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center myAlbum_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub myAlbum_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  myAlbum_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='myAlbum_fd0_0_c1_c0'>我的相册</text>
				</view>
				<view class='flex flex-wrap align-center myAlbum_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#6A0002"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<!---flex布局flex布局开始-->
		<block v-else>
			<view class="noData_other" v-if="isshenhe== 0">
				<image src="/static/images/shenhe.png"></image>
				<view style="margin-top: 50rpx;">审核中~</view>
			</view>
			<!-- <view class="noData_other" v-show="isshenhe==2 ">
				<image src="/static/images/shenhe.png"></image>
				<view style="margin-top: 50rpx;">审核失败，请重新上传~ </view>
			</view> -->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout" v-if="isshenhe==-1">
				<view class='flex flex-direction flex-wrap align-stretch'>
					<view class="images_list">
						<view class="images_list_item" v-for="(v, k) in imageData" :key="k">
							<image @tap.stop="previewImg(k)" :src='v' mode="aspectFill"></image>
							<image @tap.stop="deleteImg(k)" class="deImg" :src='STATIC_URL+"34.png"' mode=""></image>
						</view>
						<view class="images_list_item" @tap.stop="uploadIMG" v-if="imageData.length < 9">
							<image :src='STATIC_URL+"48.jpg"' mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="flex benben-flex-layout flex-wrap align-center" @tap.stop="sumbitFunc">
					<button class='aboutUs_fd3_0'>提交</button>
				</view>
			</view>

			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout" v-if="isshenhe==1">
				<view class='flex flex-direction flex-wrap align-stretch'>
					<view class="images_list">
						<view class="images_list_item" v-for="(v, k) in imageData" :key="k">
							<image @tap.stop="previewImg(k)" :src='v' mode="aspectFill"></image>
							<image @tap.stop="deleteImg(k)" class="deImg" :src='STATIC_URL+"34.png"' mode=""></image>
						</view>
						<view class="images_list_item" @tap.stop="uploadIMG" v-if="imageData.length < 9">
							<image :src='STATIC_URL+"48.jpg"' mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="flex benben-flex-layout flex-wrap align-center" @tap.stop="sumbitFunc">
					<button class='aboutUs_fd3_0'>提交</button>
				</view>
			</view>

			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout" v-if="isshenhe==2">
				<view class='flex flex-direction flex-wrap align-stretch'>
					<view class="images_list">
						<view class="images_list_item" v-for="(v, k) in imageData" :key="k">
							<image @tap.stop="previewImg(k)" :src='v' mode="aspectFill"></image>
							<image @tap.stop="deleteImg(k)" class="deImg" :src='STATIC_URL+"34.png"' mode=""></image>
						</view>
						<view class="images_list_item" @tap.stop="uploadIMG" v-if="imageData.length < 9">
							<image :src='STATIC_URL+"48.jpg"' mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="error">
					<text>审核拒绝原因：</text>
					<text>{{usefInfo.images_reason}}</text>
				</view>
				<view class="flex benben-flex-layout flex-wrap align-center" @tap.stop="sumbitFunc">
					<button class='aboutUs_fd3_0'>重新提交</button>
				</view>
			</view>
		</block>

		<!---flex布局flex布局结束-->


	</view>
</template>
<script>
	import UploadImage from '@/common/utils/upload-image.js'
	export default {
		components: {},


		data() {
			return {
				imgList: [],
				imgIds: '',
				isshenhe: -1,
				"imageData": [], // 图片列表
				isShow: true,
				isSubmit: false,
				usefInfo: {},
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.getuser()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 上传图片
			uploadIMG(e) {
				let self = this
				// 从相册中选择图片
				uni.chooseImage({
					count: self.imgNum, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择

					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// console.log(tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: global.API_BASE_URL + global.API_VERSION +
									'/6438a7602dbc6', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file[]',
								formData: {
									dir: 'images'
								},
								success: (uploadFileRes) => {
									// console.log(uploadFileRes)
									self.imageData.push(JSON.parse(uploadFileRes.data).data[0]
										.path)
									self.imgNum = 9 - self.imageData.length
								},
								fail: function(err) {
									console.log(err)
								}
							});
						}

					}
				});
			},
			// 删除图片
			deleteImg(index) {
				this.imageData.splice(index, 1);
				this.$message.info('删除成功');
				this.imgNum = 9 - this.imageData.length;
			},
			//提交
			async sumbitFunc() {
				if (this.isSubmit) return;
				this.isSubmit = true;
				//请求方法
				if (this.imageData.length == 0) {
					this.$message.info('请上传相册图片');
					return;
				}
				let dataresult = await this.$api.post(global.apiUrls.post64c9b99b6af62, {
					images: this.imageData.length > 0 ? this.imageData.join(',') : ""
				});
				if (dataresult.data.code != 1) {
					this.isSubmit = false;
					this.$message.info(dataresult.data.msg);
					return;
				}
				this.$message.info(dataresult.data.msg);
				setTimeout(() => {
					// this.getuser()
					this.isSubmit = false;
					uni.navigateBack();
				}, 800);
			},
			//获取信息
			async getuser() {
				let res = await this.$api.post(global.apiUrls.userinfo, {});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg)
					return
				}
				this.isShow = false;
				this.usefInfo = res.data.data
				if (this.usefInfo.images_status == 0) {
					this.isshenhe = 0
				} else if (this.usefInfo.images_status == 2) {
					// this.$message.info("审核失败，请重新上传")
					this.isshenhe = 2
				} else if (this.usefInfo.images_status == -1) {
					this.isshenhe = -1
				} else if (this.usefInfo.images_status == 1) {
					this.isshenhe = 1
				}
				// console.log(this.usefInfo, 'this.usefInfo')
				//判断有没有已经有审核过的形象照
				if (this.usefInfo.images.length !== 0) {
					this.imageData = this.usefInfo.images
				}
			},
			previewImg(k) {
				let _this = this;
				uni.previewImage({
					current: k,
					urls: _this.imageData
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.error {
		font-size: 24rpx;
		color: #6a0002;
		padding: 16rpx 24rpx;
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: var(--benbenbgColor0);
		background-size: 100% auto !important;
	}

	.myAlbum_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.images_list {
		overflow: hidden;

		.images_list_item {
			float: left;
			margin: 24rpx 10rpx 10rpx 20rpx;
			width: 150rpx;
			height: 150rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}

			.deImg {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 4rpx;
				right: 4rpx;
			}
		}
	}

	.myAlbum_fd0_0_c2 {
		width: 32rpx;
		height: 32rpx;
	}

	.iNeedFeedback_fd1_3_c1_c0 {
		padding: 24rpx 0rpx 0rpx 24rpx;
	}

	.iNeedFeedback_fd1_3_c1_c00 {
		margin: 0rpx 24rpx 24rpx 0rpx;
	}

	.shenhe {}

	.aboutUs_fd3_0 {
		background: #6a0002;
		border-radius: 42rpx;
		font-size: 30rpx;
		color: #fff;
		width: 686rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 124rpx 24rpx 24rpx 24rpx;
	}

	.iNeedFeedback_fd1_3_c1_c000 {
		top: 0rpx;
		right: 0rpx;
		z-index: 10;
		color: #ff5536;
	}

	.iNeedFeedback_fd1_3_c1_c001 {
		width: 190rpx;
		height: 190rpx;
		margin: 0rpx 0rpx 0rpx 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.iNeedFeedback_fd1_3_c1_c01 {
		width: 190rpx;
		height: 190rpx;
		margin: 0rpx 24rpx 24rpx 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.iNeedFeedback_fd1_3_c1_c02 {
		font-size: 24rpx;
		color: rgba(191, 191, 191, 1);
		font-weight: 400;
		width: 100%;
		margin-left: 20rpx;
	}

	.myAlbum_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.myAlbum_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.myAlbum_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.myAlbum_fd1_0_c0_c0 {
		width: 160rpx;
		height: 160rpx;
		margin: 12rpx 8rpx 12rpx 8rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.myAlbum_fd1_0 {
		margin: 0rpx 23rpx 0rpx 23rpx;
		padding: 12rpx 0rpx 0rpx 0rpx;
	}
</style>